<!--
 * @Description: 
 * @Author: lz
 * @Date: 2022-12-22 20:01:57
 * @LastEditTime: 2022-12-28 19:21:43
 * @LastEditors: lz
-->
<template>
  <div class="home-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="项目名称">
        <el-input
          v-model="formInline.projectName"
          placeholder="项目名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目类型">
        <el-select v-model="formInline.projectType" placeholder="项目类型">
          <el-option
            v-for="item in selectlist"
            :key="item.lableId"
            :label="item.label"
            :value="item.lableId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="建设性质">
        <el-select v-model="formInline.projectNature" placeholder="建设性质">
          <el-option
            v-for="item in selectlist2"
            :key="item.lableId"
            :label="item.label"
            :value="item.lableId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区">
        <el-input v-model="formInline.area" placeholder="地区"></el-input>
      </el-form-item>
      <el-form-item label="所属行业">
        <el-input
          v-model="formInline.industryName"
          placeholder="所属行业"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%;margin-bottom:30px"
      height="550"
    >
      <el-table-column
        label="序号"
        type="index"
        width="100"
        fixed
        align="center"
      ></el-table-column>
      <template v-for="item in columns">
        <!-- 基本数据 -->
        <el-table-column
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        ></el-table-column>
      </template>
      <!-- <el-table-column
        show-overflow-tooltip
        key="enableState2"
        prop="enableState2"
        label="项目标签"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.labels.toString() }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-row type="flex" justify="center">
            <el-button size="mini" type="text" @click="handeLook(scope.row)"
              >查看</el-button
            >
            <el-button size="mini" type="text" @click="claim(scope.row)"
              >认领</el-button
            >
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="paginationConfig.total > 0"
      class="pagination"
      :total="paginationConfig.total"
      :current-page="paginationConfig.pageNo"
      :page-size="paginationConfig.pageSize"
      :page-sizes="[10, 20, 30, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="changeCurrentPage"
      @size-change="changeSizePage"
    />
    <DialogWrap dialogTitle="时间节点设置" :dialogVisible.sync="dialogVisible">
      <template #content>
        <el-form :model="formDialog" label-width="220px">
          <el-form-item label="领取施工许可证时间节点：">
            <el-date-picker
              v-model="formDialog.licenceTime"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="项目竣工验收时间节点：">
            <el-date-picker
              v-model="formDialog.completionAcceptanceTime"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button type="primary" plain @click="onClose()">取 消</el-button>
        <el-button type="primary" @click="onDialogEdit()">确认并认领</el-button>
      </template>
    </DialogWrap>
  </div>
</template>
<script>
import {
  getProject,
  addAdoptProject,
  getProjectNature,
  getLPabceeegjlorttData
} from "@/api/homeApi";
import DialogWrap from "@/components/DialogWrap";
export default {
  components: {
    DialogWrap
  },
  data() {
    return {
      formInline: {
        projectName: "",
        projectType: "",
        projectNature: "",
        area: "",
        industryName: ""
      },
      selectlist: [
        {
          label: "审批",
          lableId: "A00001"
        },
        {
          label: "核准",
          lableId: "A00002"
        },
        {
          label: "备案",
          lableId: "A00003"
        }
      ],
      selectlist2: [
        {
          label: "新建",
          lableId: 0
        },
        {
          label: "扩建",
          lableId: 1
        },
        {
          label: "迁建",
          lableId: 2
        },
        {
          label: "改建",
          lableId: 3
        },
        {
          label: "其他",
          lableId: 4
        }
      ],

      columns: [
        { prop: "projectName", label: "项目名称" },
        { prop: "projectTypeName", label: "项目类型" },
        { prop: "projectNatureName", label: "建设性质" },
        { prop: "industryName", label: "所属行业" },
        { prop: "area", label: "地区" },
        { prop: "totalAmount", label: "总投资（万元）" }
        // { prop: "progressName", label: "当前进度" }
      ],
      tableData: [],
      paginationConfig: {
        total: 0,
        pageNo: 1,
        pageSize: 10
      },
      dialogVisible: false,
      formDialog: {
        id: null,
        licenceTime: "",
        completionAcceptanceTime: ""
      },
      projectNatureData: [],
      pabceeegjlorttData: []
    };
  },
  created() {
    this.getData();
    this.pageInit();
  },
  methods: {
    pageInit() {
      getProjectNature({}).then(res => {
        this.projectNatureData = res.data;
      });
      getLPabceeegjlorttData({}).then(res => {
        this.pabceeegjlorttData = res.data;
      });
    },
    getData() {
      getProject({ ...this.formInline, ...this.paginationConfig }).then(res => {
        this.tableData = res.data.records;
        let list2 = ["新建", "扩建", "迁建", "改建", "其他"];

        this.tableData.forEach(element => {
          element.projectTypeName = this.selectlist.map(n => {
            console.log(n);
            if (n.lableId === element.projectType) {
              return n.label;
            } 
          });
          console.log(element.projectTypeName);
          element.projectNatureName = list2[element.projectNature];
        });
        this.paginationConfig.total = res.data.total;
      });
    },
    changeCurrentPage(pageNo) {
      this.paginationConfig.pageNo = pageNo;
      this.getData();
    },
    changeSizePage(pageSize) {
      this.paginationConfig.pageSize = pageSize;
      this.getData();
    },
    handeLook(row) {
      this.$router.push("/home/detail?id=" + row.id);
    },
    claim(row) {
      this.formDialog.id = row.id;
      this.dialogVisible = true;
    },
    onClose() {
      this.dialogVisible = false;
      this.formDialog = {
        id: null,
        licenceTime: "",
        completionAcceptanceTime: ""
      };
    },
    onDialogEdit() {
      if (!this.formDialog.licenceTime) {
        return this.$message({
          message: "请选择领取施工许可证时间节点",
          type: "error"
        });
      }
      if (!this.formDialog.completionAcceptanceTime) {
        return this.$message({
          message: "请选择项目竣工验收时间节点",
          type: "error"
        });
      }
      addAdoptProject({
        id: this.formDialog.id,
        agencyPeople: JSON.parse(localStorage.getItem("P-User-Info")).id,
        licenceTime: this.formDialog.licenceTime,
        completionAcceptanceTime: this.formDialog.completionAcceptanceTime
      }).then(res => {
        this.$message({
          message: res.msg,
          type: "success"
        });
        this.dialogVisible = false;
        this.getData();
        this.formDialog = {
          id: null,
          licenceTime: "",
          completionAcceptanceTime: ""
        };
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.pagination {
  text-align: right;
}
</style>
